<template>
    <div class="person-center">
      <header class="header">
        <div class="header-box">
        </div>
      </header>
      <Row justify="center" type="flex" class-name="main-box">
        <i-col :span="19">
          <Card class="card" :shadow="true">
            <div class="card-box">
              <div class="identity-box">
                <Avatar :src="userHeader"/>
                <div class="account-name">
                  <h3 class="hello">您好</h3>
                  <h4 class="name">{{userInfo.userName}}</h4>
                  <span class="account">账号：{{(userInfo.userAccount) | splitFilters(15)}}</span>
                </div>
              </div>
              <div class="email-sex">
                <span class="sex">性别：<b>{{userInfo.userInfo.sex | sexFilter}}</b></span>
                <span class="email">邮箱：<b>{{userInfo.userInfo.email | skyFilter}}</b></span>
                <span class="wx">微信：<b>{{userInfo.userInfo.wechat | skyFilter}}</b></span>
              </div>
              <div class="phone-id">
                <span class="phone">手机号：<b>{{userInfo.userInfo.phone | skyFilter}}</b></span>
                <span class="id">身份证：<b>{{userInfo.userInfo.idCard | skyFilter}}</b></span>
                <span class="zw">职&nbsp;&nbsp;&nbsp;&nbsp;务：<b>{{userInfo.userInfo.rfPositionDictName | skyFilter}}</b></span>
              </div>
            </div>
            <Button type="primary" ghost class="update-info" size="small" @click="updateInfo">修改信息</Button>
          </Card>
          <Divider orientation="left">登录日志</Divider>
          <BaseTable
            ref="baseTable"
            size="small"
            :action="action.readUserByPage"
            :columns="columns"
            :isLoading="false"
          />
        </i-col>
      </Row>
    </div>
</template>

<script>
import columns from './person-center-columns'
import API_KEY from '../../api/index'
import { getPersonInformationUser } from '../../api/modules/person/person'
import { typeOf } from '../../utils/verification'
import BaseUtil from '../../utils/BaseUtil'

export default {
  name: 'personCenter',
  data () {
    return {
      action: {
        getSysUser: API_KEY.user.getSysUser,
        readUserByPage: API_KEY.loginLog.syslogLoginLog
      },
      columns,
      userInfo: {
        userName: '超级用户',
        userAccount: '超级用户',
        userInfo: {
          wechat: '',
          email: '',
          phone: '',
          idCard: '',
          rfPositionDictName: '',
          sex: 0,
          headPath: ''
        }
      }
    }
  },
  computed: {
    userHeader () {
      if (this.userInfo.userInfo.headPath) {
        return BaseUtil.getUploadPath(this.userInfo.userInfo.headPath)
      }
      return require('@/assets/imgs/home/header.png')
    },
    currRouter () {
      return this.$route.path
    }
  },
  created () {
    this.getUserInfo()
  },
  filters: {
    // 性别过滤器
    sexFilter (val) {
      const arr = ['默认', '男', '女']
      return arr[val]
    },
    // 判空过滤器
    skyFilter (val) {
      return val === '' || val === null ? '暂未设置' : val
    },
    splitFilters (val, max) {
      if (val.length > max) {
        return val.substr(0, max) + '...'
      }
      return val
    }
  },
  methods: {
    /**
     * 修改个人信息
     */
    updateInfo () {
      if (this.currRouter !== '/personSetting') {
        this.$router.push('/personSetting')
      }
    },
    /**
     * 获取当前用户信息
     */
    getUserInfo () {
      getPersonInformationUser().then(({ data }) => {
        Object.keys(this.userInfo).forEach((item) => {
          if (typeOf(this.userInfo[item]) === 'object') {
            Object.keys(this.userInfo[item]).forEach((item1) => {
              if (typeOf(data[item][item1]) !== 'undefined') {
                this.$set(this.userInfo[item], item1, data[item][item1])
              }
            })
          } else {
            if (typeOf(data[item]) !== 'undefined') {
              this.$set(this.userInfo, item, data[item])
            }
          }
        })
      })
    }
  },
  components: {
    BaseTable: () => import('@/components/view-ui/BaseTable.vue')
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/styles/scss/mixin";
.person-center {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: 3.9rem;
    overflow: hidden;
    .header-box {
      width: 100%;
      height: 4.5rem;
      margin-top: -60px;
      background: url('~@/assets/imgs/home/header.png') left top no-repeat;
      background-size: 100% auto;
    }
  }
  .main-box {
    .ivu-col {
      margin-top: -2.86rem;
      margin-bottom: .97rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 6px 7px 0px rgba(32, 32, 32, 0.09);
      border-radius: 8px;
      padding: .38rem .5rem .5rem;
      .card{
        padding: .2rem;
        @include positionMixer(relative);
        .card-box{
          width: 100%;
          height: 1.22rem;
          @include flexMixer(flex-start, flex-start);
          .identity-box{
            @include flexMixer(flex-start, flex-start);
            height: 100%;
            .ivu-avatar{
              width: 1.22rem;
              height: 100%;
              img{
                width: 100%;
                height: auto;
              }
            }
            .account-name{
              margin-left: .3rem;
              height: 100%;
              @include flexMixer(space-between, flex-start, column);
              .hello{
                font-size: .24rem;
                color: #0197FF;
              }
              .name{
                font-size: .2rem;
                color: #000000;
              }
              .account{
                /*font-size: 12px;*/
                color: #333333;
              }
            }
          }
          .email-sex{
            color: #000000;
            height: 100%;
            margin-left: .5rem;
            padding-left: 1.09rem;
            border-left: #E3E3E5 1px solid;
            @include flexMixer(space-between, flex-start, column);
            .email{
              min-width: 190px;
            }
          }
          .phone-id{
            @extend .email-sex;
            border-left: none;
            margin-left: .8rem;
            .id{
              min-width: 210px;
            }
          }
        }
        .update-info{
          position: absolute;
          right: 30px;
        }
      }
    }
  }
}
/deep/ .ivu-table th, /deep/.ivu-table td{
  border-bottom: none;
}
/deep/ .ivu-table th{
  height: 40px;
}
/deep/.ivu-table th{
  background-color: #EFF2FE;
}
/deep/.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td{
  background-color: #EFF2FE;
}
.table /deep/ .ivu-table{
  border-top: none !important;
}
</style>
